<template>
	<view class="content">
		<view class="top"></view>
		<view class="wrapper">
			<view class="product">
				<view class="product-top disp aic">
					<image class="product-Pic" :src="message.productImg" mode=""></image>
					<view class="product-message disc jsb">
						<view class="fw fz16">{{message.productName}}</view>
						<view class="right disp">
							<view class="product-tabs">{{message.productLable}}</view>
						</view>
					</view>
				</view>
				<view class="product-mess disb aic">
					<view class="">
						<view class="fz18 color fw" style="margin-left: -15rpx;">
<!--              {{message.maxAmount}}-->
              <u--text mode="price" :text="message.maxAmount" size="17" color="#D34200" bold="true"></u--text>
            </view>
						<view class="fw fz16">{{maxAmountLabel}}</view>
					</view>
					<view class="">
						<view class="fz18 fw">{{message.annualInterest}}</view>
						<view class="fw fz16">{{annualInterestLabel}}</view>
					</view>
					<view class="">
						<view class="fz18 fw">{{message.loanTime}}</view>
						<view class="fw fz16">{{loanPeriodLabel}}</view>
					</view>
				</view>
			</view>
			<view class="loanInformation">
				<view class="fw tac">基本信息</view>
				<view class="list">
					<!-- <view class="listBar">
						<text>度：</text>
						<text>{{message.maxAmount}}元</text>
					</view>
					<view class="listBar">
						<text>率：</text>
						<text>利率{{message.annualInterest}}</text>
					</view> -->

					<view class="listBar">
						<text>方案备注：</text>
						<text>{{message.productIntroduce}}</text>
					</view>
				</view>
			</view>
			<view class="seeBtn tac colorf fw" @click="toCompletion">规划方案</view>
		</view>
	</view>
</template>

<script>
	import { getDetail,checkUserData } from '../../api/category';
  import {getUserInfo} from "@/api/setting";
	export default {
		data() {
			return {
				userType:uni.getStorageSync('userInfo').userType,
				message:{},
        userInfo:[],
        pid:null,
				maxAmountLabel: '',
				annualInterestLabel: '',
				loanPeriodLabel: ''
			};
		},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfo')
    },
		onLoad(option) {
      this.pid = option.id
			this.getMess(option.id)
			this.getWordings()
		},
		methods:{
			// 获取缓存的文案配置
			getWordings() {
				const maxAmount = uni.getStorageSync('max_amount')
				if (maxAmount) {
					this.maxAmountLabel = maxAmount
				}
				
				const annualInterest = uni.getStorageSync('annual_interest')
				if (annualInterest) {
					this.annualInterestLabel = annualInterest
				}
				
				const loanPeriod = uni.getStorageSync('loan_period')
				if (loanPeriod) {
					this.loanPeriodLabel = loanPeriod
				}
			},
			toCompletion(){
        console.log(this.userInfo)
        if (this.userInfo){
          if (this.userInfo.name && this.userInfo.age) {
            checkUserData({productTypeId:this.message.productType}).then(res => {
              uni.navigateTo({
                url:`/pagesA/list/carInformation?id=`+this.message.productType+"&pid="+this.pid+'&productTypeName='+this.message.productTypeName
              })
            })
          } else {
              uni.$u.toast('请先完善基本信息')
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/setting/setting"
                })
              }, 1500)
          }
        }else {
          uni.showModal({
            title: '提示',
            content: '规划方案需要登录，是否立即登录？',
            success: (res) => {
              if (res.confirm) {
                getUserInfo().then(res => { //取实时
                  this.userInfo = res.data
                })
              }
            }
          })
        }

				// checkUserData({productTypeId:this.message.productType}).then(res => {
        //     uni.navigateTo({
        //       url:`/pagesA/list/carInformation?id=`+this.message.productType+"&pid="+this.pid+'&productTypeName='+this.message.productTypeName
        //     })
				// })

			},
			getMess(id) {
				getDetail({id:id}).then(res => {
					this.message = res.data
          // const value = this.message.maxAmount;
          // if (value >= 100000000) {
          //   this.message.maxAmount = (value / 100000000).toFixed(2) + ' 亿';
          // } else if (value >= 10000) {
          //   this.message.maxAmount = (value / 10000).toFixed(2) + ' 万';
          // } else if (value >= 1000) {
          //   this.message.maxAmount = (value / 1000).toFixed(2) + ' 千';
          // } else {
          //   this.message.maxAmount = value;
          // }
          // console.log( this.message.maxAmount)
				})

			},
		}
	}
</script>

<style lang="scss">
.content{
	min-height: 100vh;
	background-color: #f7f7f7;
	.top{
		height: 200rpx;
		background-color: #323CDD;
	}
	.wrapper{
		padding: 0 24rpx;
		position: relative;
		top: -170rpx;
		.product{
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin: 20rpx 0;
			.product-top{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f7f7f7;
				.product-Pic{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
				.product-message{
					height: 100rpx;
				}
				.product-tabs{
					background-color: #d4efff;
					color: #4854f7;
					padding: 6rpx 20rpx;
					border-radius: 25rpx;
					font-size: 30rpx;
				}
			}
			.product-mess{
				padding: 20rpx 0;
				.applyBtn{
					width: 200rpx;
					line-height: 60rpx;
					border-radius: 40rpx;
					background-color: #323CDD;
				}
			}
		}
		.loanInformation{
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin: 20rpx 0;
			.list{
				margin-top: 40rpx;
				.listBar{
					margin: 10rpx 0;
					text{line-height: 52rpx;}
				}
			}
		}
		.seeBtn{
			width: 80%;
			line-height: 80rpx;
			background-color: #323CDD;
			border-radius: 40rpx;
			margin: 40rpx auto;
		}
	}
}
</style>
